<!-- 蓝色登录页面2 -->
<template>
	<view>
		<view class="img-a">
			<view class="t-b">
				您好，
				<br />
				欢迎登录
			</view>
		</view>
		<view class="login-view" style="">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<text class="txt">QQ号</text>
						<input type="number" name="email" placeholder="请输入您的QQ号" maxlength="50" v-model="email" />
						<text style="width: 200rpx;font-size: 40rpx;;position: absolute;right: 0rpx;bottom: 30rpx;">@qq.com</text>
					</view>
					<view class="t-a">
						<text class="txt">验证码</text>
						<input type="number" name="code" maxlength="4" placeholder="请输入您的邮箱验证码" v-model="code"/>
						<button v-if="!isSend" style="width: 200rpx;position: absolute;right: 0rpx;top: 40rpx;" @click="sendSms" :disabled="isSend">
							获取验证码
						</button>
						<button v-if="isSend" style="width: 200rpx;position: absolute;right: 0rpx;top: 40rpx;background: #ccc;" @click="sendSms" :disabled="isSend">
							{{miao}}
						</button>
					</view>
					<button @tap="login()">登 录</button>
					<view class="reg" @tap="reg()">模拟登录</view>
					<view class="reg" @tap="loginqq">QQ授权登录</view>
					<view class="xieyi" >
					  <!-- <label @click="check"><u-checkbox :v-model="checked"  style="transform:scale(0.7)" /></label> -->
					  <u-checkbox-group>
					  	<u-checkbox v-model="checked" ></u-checkbox>
					  </u-checkbox-group>
						<text class="text-grey1">登录即代表同意</text>
						<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
						<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>
<script>
	import request from '@/common/request.js';
export default {
	data() {
		return {
			email: '', //手机号码
			code: '', //密码
			checked: false,
			isSend:false,
			miao:60,
			interval:null
		};
	},
	onLoad() {},
	methods: {
		//当前登录按钮操作
		login() {
			var that = this;
			if (!that.email) {
				uni.showToast({ title: '请输入您的邮箱', icon: 'none' });
				return;
			}
			// if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
			// 	uni.showToast({ title: '请输入正确手机号', icon: 'none' });
			// 	return;
			// }
			// if (!that.pwd) {
			// 	uni.showToast({ title: '请输入您的密码', icon: 'none' });
			// 	return;
			// }
			console.log(that.checked)
			if(!that.checked){
				uni.showToast({ title: '请同意用户协议', icon: 'none' });
				return;
			}
			
			//请求登录
			let opts = {
				url: 'api/user/emaillogin',
				method: 'post'
			};
			request.httpRequest(opts,{email:this.email,captcha:this.code}).then((res)=>{
				if(res.data.code == '0'){
					uni.showToast({ title:res.data.msg, icon: 'none' });
					return;
				}else{
					uni.setStorageSync('token',res.data.data.userinfo.token);
					uni.setStorageSync('userInfo',res.data.data.userinfo);
					uni.showToast({ title:res.data.msg,icon: 'none'});
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/index/tabbar'
						})
					},1000)
					return;
				}
			})
		},
		//注册按钮点击
		reg() {
			let opts = {
				url: 'api/user/testlogin',
				method: 'post'
			};
			request.httpRequest(opts).then((res)=>{
				if(res.data.code == '0'){
					uni.showToast({ title:res.data.msg, icon: 'none' });
					return;
				}else{
					uni.setStorageSync('token',res.data.data.userinfo.token);
					uni.setStorageSync('userInfo',res.data.data.userinfo);
					uni.showToast({ title:res.data.msg,icon: 'none'});
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/index/tabbar'
						})
					},1000)
					return;
				}
			})
		},
		handlePrivacy() {
			uni.showToast({
				title:"点击了隐私协议",
				icon:"none"
			})
		},
		// 用户协议
		handleUserAgrement() {
			uni.showToast({
				title:"点击了用户协议",
				icon:"none"
			})
		},
		toNav(url) {
			uni.navigateTo({
				url: url
			});
		},
		sendSms(){
			if(!this.email){
				uni.showToast({ title: '请输入您的邮箱', icon: 'none' });
				return;
			}
			this.isSend = true;
			let opts = {
				url: 'api/ems/send',
				method: 'post'
			};
			request.httpRequest(opts,{email:this.email,event:'login'}).then((res)=>{
				this.init();
				uni.showToast({ title:res.data.msg, icon: 'none' });
				return;
				if(res.data.code == '0'){
					uni.showToast({ title:res.data.msg, icon: 'none' });
					return;
				}else{
					uni.showToast({ title:'验证码：'+res.data.data.code, icon: 'none' });
				}
			})
		},
		init(){
			this.miao = 60;
			this.interval = setInterval(() => {
			    if (this.miao > 0) {
			        this.miao--;
			    } else {
			        clearInterval(this.interval);
			        this.isSend = false;
			    }
			}, 1000);
		},
		check(){
			this.checked = !this.checked;
			console.log('12312321321');
		},
		async loginqq(){
			if(!this.checked){
				uni.showToast({
					title:"请先阅读和同意用户协议和隐私政策",
					icon: 'none'
				})
				return 
			}
			  let notify_url = encodeURIComponent('http://niudan.aiplaygpt.com/pages/login/index');
			  let url = "https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=102115603&state=niudan&display=mobile&redirect_uri=" + notify_url;
			  window.location.href=url;
		},
	}
};
</script>
<style>
	page{
		background: #fff;
	}
.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.img-a {
	width: 100%;
	height: 280rpx;
	background-image: url(../../static/head.png);
	background-size: 100%;
}
.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}

 .xieyi {
        color: #333;
        margin-top: 20px;
		margin-left: 20rpx;
      }
	  
.text-blue {
	color: blue;
}
	  

.login-view {
	width: 100%;
	position: relative;
	margin-top: -60rpx;
	background-color: #ffffff;
	border-radius: 8% 8% 0% 0;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	background: #2796f2;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-b {
	text-align: left;
	font-size: 42rpx;
	color: #ffffff;
	padding: 50rpx 0 0 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 80rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}

.beian{
		text-align: center;
		color: black;
		font-size: 12px;
		margin-top: 100rpx;
		margin-bottom: 20rpx;
	}
</style>
